<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>聊天窗口</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
    var allcookies = document.cookie;
    cookieArr = allcookies.split(';');
    
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if ('uname' == cookiePair[0].trim()) {
            var uname = cookiePair[1]
           
        }
    }
    
    console.log(uname)


    var ws;
	var ws_url="ws://localhost:8080/chatroomWebSocket/chatroom";
	
	$(function() {
		
		 ws_connect();
		 $("#send").click(function(){
		    ws_sendMsg();
		 });
	
	});
	function ws_connect() {
		var loginUser="${sessionScope.loginName}";
		if ('WebSocket' in window) {
			ws = new WebSocket(ws_url+"?loginName="+uname);
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(ws_url+"?loginName="+uname);
		} else {
			console.log('Error: WebSocket is not supported by this browser.');
			return;
		}

		ws.onopen = function() {
			console.log('Info: WebSocket connection opened.');
			
		};

		ws.onclose = function() {
			
			console.log('Info: WebSocket closed.');
		};

		ws.onmessage = function(message) {
			//console.log("@@@"+message.data);
			var receiveMsg=message.data;
			 var obj=JSON.parse(receiveMsg);
			 if(obj.type=="s"){
				 $("#record").append("<div>"+obj.msgDateStr+""+obj.msgInfo+"</div>");
				 var userHtml="";
				  var userList=obj.userList;
				    for(var i=0;i<userList.length;i++){
				    	userHtml=userHtml+userList[i]+"<br/><br/>";
				    }
				     $("#userList").html(userHtml);
			 }else if(obj.type=="p"){
				 $("#record").append("<div>"+obj.msgSender+":&nbsp;"+obj.msgDateStr+"</div><div>"+obj.msgInfo+"</div>");
			 }else{
				 //未来可以用于扩展功能
			 }
			
		};
	};

	function ws_sendMsg() {
         var msg=$("#msg").val();
         ws.send(msg);
        msg= $("#msg").val("");
	};

	function ws_sendImg() {

	};
</script>

<head>

</head>

<body>
    ********************聊天窗口******************************
    <table style="border: 1px solid #00F;">
        <tbody>
            <tr>
                <td colspan="2" align="center">
                    <h3>welcome to【${sessionScope.loginName}】 use this system!</h3>
                </td>
            </tr>
            <tr>
                <td width="500px" height="300px" style="border: 1px solid #00F; vertical-align: top;" id="content"
                    name="content">
                    <div style="background-color: white;">
                        <table id="tbRecord">
                            <tbody id="record" style="display: block; height: 300px; width: 500px; overflow: auto;" />
                        </table>
                    </div>
                </td>
                <td width="100px" style="border: 1px solid #00F; vertical-align: top;">
                    <div style="overflow: auto;">
                        <table id="tbuserList">
                            <tbody id="userList" style="display: block; height: 300px; overflow: auto;" />
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" align="center"><input id="msg" name="msg" style="width: 100%;" placeholder="信息输入" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button style="margin: 0 30px 0 30px" id="send" name="send">send</button>
                    <input type="file" id="img" style="width: 200px; height: 30px" />
                    <button id="uploadImg" name="uploadImg">uploadImg</button>
                    <button style="margin: 0 30px 0 30px" id="disconnect" name="disconnect">Disconnect</button>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

</html>>